<template>
  <!-- 折线图组件 -->
  <div id="main" ref="lineEchart" class="barEchart" />
</template>
<script>
import dayjs from 'dayjs';
// import * as echarts from 'echarts'
export default {
  name: 'Linechart',
  props: {
    xAxisData: {
      type: Array,
      default: () => {
        return [
          '1:00',
          '2:00',
          '3:00',
          '4:00',
          '5:00',
          '6:00',
          '7:00',
          '8:00',
          '9:00',
          '10:00',
          '11:00',
          '12:00',
          '13:00',
          '14:00',
          '15:00',
          '16:00',
          '17:00',
          '18:00',
          '19:00',
          '20:00',
          '21:00',
          '22:00',
          '23:00',
          '0:00',
          ,
        ];
      },
    },
    seriesData1: {
      type: Array,
      default: () => {
        return [
          '10',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '10',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '10',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '15.3',
          '13.6',
          '19',
        ];
      },
    },
    seriesData2: {
      type: Array,
      default: () => {
        return [
          '3',
          '6',
          '13',
          '14.8',
          '15.9',
          '16.3',
          '17',
          '10',
          '12.6',
          '13',
          '14',
          '15',
          '16',
          '17',
          '10.5',
          '12',
          '13.9',
          '14',
          '15.3',
          '16.8',
          '16.6',
          '15.3',
          '13.6',
          '19',
        ];
      },
    },
  },
  data() {
    return {
      property: 'value',
    };
  },
  watch: {
    // 监听数据变化
    xAxisData: {
      handler(newVal, oldVal) {
        this.drawChart();
      },
      deep: true,
    },
    seriesData: {
      handler(newVal, oldVal) {
        this.drawChart();
      },
      deep: true, // 深度监听
    },
  },

  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let time = dayjs().format('H'); // 得到当前时间根据当前时间显示数据
      let seriesData1 = [];
      let seriesData2 = [];
      seriesData1 = this.seriesData1.slice(0, time);
      seriesData2 = this.seriesData2.slice(0, time);
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.lineEchart);
      //   绘制图标
      myChart.setOption({
        grid: {
          // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line'],
            }, //
          },
        },
        legend: {
          // data: ['语文'],
        },
        series: [
          {
            name: '时间',
            data: seriesData1,
            type: 'bar',

            // 平均值
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                },
              ],
              symbol: 'none', // 去掉虚线的箭头
            },
            //   平滑
            smooth: true,

            lineStyle: {
              color: 'green', // 设置线的颜色
              type: 'solid', // 虚线  solid 实线 dotted 点线
            },

            // areaStyle: {
            //   // 面积图
            //   color: 'pink',
            // },
          },
          {
            name: '时间2',
            data: seriesData2,
            type: 'bar', // line折线图 bar柱状图
            //   平滑
            smooth: true,
            lineStyle: {
              color: 'red', // 设置线的颜色
              type: 'solid', // 虚线  solid 实线 dotted 点线
            },

            // areaStyle: {
            //   面积图
            //   color: 'pink',
            // },
          },
        ],
      });
    },
  },
};
</script>
